<template>
    <!-- 修改资料 -->

    <div>
        <!-- 内容主题区域 -->
        <el-form label-width="100px" :model="form" label-position="right" ref="formRef" :disabled="disabled"
            :class="{ 'borderNone': disabled }">
            <el-card>
                <el-row>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                        <el-form-item label="指定材料" prop="appointStuff">
                            <el-radio-group v-model="form.appointStuff" style="margin-top: -4px;">
                                <template v-for="(item, index) in configData.haveNoList" :key="index">
                                    <el-radio :label="item.value" size="large">{{ item.label }}</el-radio>
                                </template>
                            </el-radio-group>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                        <el-form-item label="选择材料" prop="chooseStuff">
                            <el-radio-group v-model="form.chooseStuff" style="margin-top: -4px;">
                                <template v-for="(item, index) in configData.needList" :key="index">
                                    <el-radio :label="item.value" size="large">{{ item.label }}</el-radio>
                                </template>
                            </el-radio-group>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                        <el-form-item label="指定材料" prop="appointStuffs">
                            <sc-table-select v-if="!disabled" v-model="appointStuffsRows" :limit="6" multiple  :inputWidth="500"
                                :apiObj="apiObj" :fileName="appointStuffsFileName" :table-width="700" :props="tableProps" max-collapse-tags="6" @change="appointStuffsChange">
                            </sc-table-select>
                            <el-input v-else v-model="form.appointStuffs"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                        <el-form-item label="推荐材料" prop="recommendStuffs">
                            <sc-table-select v-if="!disabled" v-model="recommendStuffsRows" :limit="6" multiple :inputWidth="500" max-collapse-tags="6"
                                :apiObj="apiObj" :fileName="appointStuffsFileName" :table-width="700" :props="tableProps" @change="recommendStuffsChange">
                            </sc-table-select>
                            <el-input v-else v-model="form.recommendStuffs"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                        <el-form-item label="压制类型" prop="suppressKind">
                            <el-select v-if="!disabled" v-model="form.suppressKind" clearable placeholder="请选择：">
                                <el-option v-for="item in configData.suppressKindList" :key="item.value" :label="item.label"
                                    :value="item.value">
                                </el-option>
                            </el-select>
                            <el-input v-else v-model="form.suppressKindName"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                        <el-form-item prop="techNewModel">
                            <template #label>
                                <span v-if="!disabled" style="color: #f56c6c;margin-right: 4px;">*</span>
                                <span style="display:inline-block;">新开模具</span>
                            </template>
                            <el-radio-group v-model="form.techNewModel" style="margin-top: -4px;">
                                <template v-for="(item, index) in configData.needList" :key="index">
                                    <el-radio :label="item.value" size="large">{{ item.label }}</el-radio>
                                </template>
                            </el-radio-group>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                        <el-form-item label="模具类型" prop="moldKind">
                            <el-select v-if="!disabled" v-model="form.moldKind" clearable placeholder="请选择：">
                                <el-option v-for="item in configData.moldKindList" :key="item.value" :label="item.label"
                                    :value="item.value">
                                </el-option>
                            </el-select>
                            <el-input v-else v-model="form.moldKindName"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                        <el-form-item label="APQP方式" prop="apapStyle">
                            <el-select v-if="!disabled" v-model="form.apapStyle" clearable placeholder="请选择：">
                                <el-option v-for="item in configData.apapStyleList" :key="item.value" :label="item.label"
                                    :value="item.value">
                                </el-option>
                            </el-select>
                            <el-input v-else v-model="form.apapStyleName"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                        <el-form-item label="模具图纸纳期" prop="drawingNaperiod">
                            <el-date-picker v-if="!disabled" v-model="form.drawingNaperiod" type="date"
                                value-format="YYYY-MM-DD" placeholder="请选择日期" />
                            <el-input v-else v-model="form.drawingNaperiod"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                        <el-form-item label="技术部确认" prop="technologyResult">
                            <el-radio-group v-model="form.technologyResult" style="margin-top: -4px;">
                                <template v-for="(item, index) in configData.judgeList" :key="index">
                                    <el-radio :label="item.value" size="large">{{ item.label }}</el-radio>
                                </template>
                            </el-radio-group>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-card>
        </el-form>
    </div>
</template>

<script setup>
import { ref, onMounted, watch } from 'vue';
import sysApi from '@/api/model/system'
const emit = defineEmits(['update:modelValue'])
const props = defineProps({
    modelValue: { type: Object, default: () => { } },
    disabled: { type: Boolean, default: false },
    configData: { type: Object, default: () => { } }
})
const form = ref({})
const apiObj = ref(sysApi.select.query)
const appointStuffsRows = ref([])
const appointStuffsFileName = ref('ChooseStuffReport')
const recommendStuffsRows = ref([])
const tableProps = {
    label: 'name',
    value: 'name',
}
onMounted(() => {
    form.value = props.modelValue
    console.log(form.value)
    if (form.value.appointStuffs!=='') {
        let NameArr = form.value.appointStuffs.split(',')
        form.value.appointStuffsArray.forEach((item, index) => {
            let params = {
                name: NameArr[index],
                id: Number(item)
            }
            appointStuffsRows.value.push(params)
        })
    }
    if (form.value.recommendStuffs!=='') {
        let NameArr = form.value.recommendStuffs.split(',')
        form.value.recommendStuffsArray.forEach((item, index) => {
            let params = {
                name: NameArr[index],
                id: Number(item)
            }
            recommendStuffsRows.value.push(params)
        })
    }
})
const appointStuffsChange = (val) => {
    let arr = []
    val.forEach(item => arr.push(item.name))
    form.value.appointStuffsArray = arr
}
const recommendStuffsChange = (val) => {
    let arr = []
    val.forEach(item => arr.push(item.name))
    form.value.recommendStuffsArray = arr

}

</script>

<style lang="less" scoped>
.borderNone {
    :deep(.el-input__wrapper) {
        box-shadow: 0 0 0 0px var(--el-input-border-color, var(--el-border-color)) inset;
        cursor: default;
        background-color: transparent; //背景颜色透明
        border-bottom: 1px solid #999;
        border-radius: 0;

        .el-input__inner {
            cursor: default !important;
        }
    }
}
</style>

